<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
	</head>
	<style>
		/*css 样式思路：
		1.通配选择器：微软雅黑，#f5f5f5 浅灰，外边距至0
		2.#product_card ：边框，内边距，外边距，阴影【透明.1】，文字居中
		3.img：边框倒角，内外边距【微调】
		4.h3：颜色，内外边距【微调】
		5.p：字体大小，颜色
		6.p+span：span，内外边距【微调】*/
		*body{
			font-family: 'Microsoft YaHei' ;
			background:#f5f5f5;
			margin: 0;
			
		}
		#product_card{
			width: 300px;
			height: 600px;
			background: #ffffff;
			padding: 
			10px;
			margin: 60px 44px;
			border: 1px solid #ffffff;
			border-radius: 1%;
			box-shadow: 0px 0px 5px 5px rgba(145, 145, 145, .1);
			text-align: center;
		}
		#img{
			border-radius: 1%;
		}
		#h3{
			margin: 25px;
			color: #ffffff;
		}
		.a{
			color: #ff0000;
			font-size: 20px;
			background: #ffffff;
		}
		p,span{
			background: #ffffff;
			font-size: 12px;
			color: #8f8f8f;
		}
	</style>
	<body>
		<!--网页：1.html 结构【原生图分析】-->
		
		<div id="product_card">
			<img src="img/小米su7.jpg" width="269px" height="400px" alt="汽车">
		<h3>小米SU7</h3>
		<p class="a">￥279999.00</p>
		<p>已有<span>10万+</span></p>
	</body>
</html>